<template>
  <el-dropdown placement="bottom" trigger="click" popper-class="el-tiptap-dropdown-popper" @command="toggleHeading"
    :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
    <!-- <div> -->
      <!-- <command-button :enable-tooltip="enableTooltip" :is-active="editor.isActive('publish')"
        tooltip="发布" :readonly="isCodeViewMode" :button-icon="buttonIcon"
        icon="publish" /> -->
        <!-- <el-button color="#626aef" >发布</el-button> -->
    <!-- </div> -->
    <div class="el-tiptap-editor__super-command-button">
    <el-button color="#222222" >发布</el-button>
  </div>
    <template #dropdown>
      <el-dropdown-menu class="el-tiptap-dropdown-menu">
        <el-dropdown-item @click="pushCarnews">
          <div class="el-tiptap-dropdown-item"> 发布到carnewschina </div>
        </el-dropdown-item>
        <el-dropdown-item @click="pushXHS">
          <div class="el-tiptap-dropdown-item"> 发布到小红书 </div>
        </el-dropdown-item>
        <el-dropdown-item>
          <div class="el-tiptap-dropdown-item"> 发布到公众号 </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script  setup>
import { defineComponent, inject, ref } from 'vue';
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import { Editor } from '@tiptap/core';
import CommandButton from './CommandButton.vue';
import TypeIt from 'typeit'
import { trans2English, chat } from '@/api/plugin'
import {useEditorStore} from '@/stores/editor'
import { useUserStore } from '@/stores/user'
import {publishPost} from '@/api/post'

const props = defineProps({
  editor: {
    type: Editor,
    required: true,
  },
  buttonIcon: {
    default: '',
    type: String
  }
},)


const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
const isCodeViewMode = inject('isCodeViewMode', false);

function toggleHeading(level) {
  if (level > 0) {
    props.editor.commands.toggleHeading({ level });
  } else {
    props.editor.commands.setParagraph();
  }
}

function getSelection() {
  const { from, to } = props.editor.view.state.selection
  // console.log(props.editor.view.state.doc.textBetween(from, to, ' '));
  return props.editor.view.state.doc.textBetween(from, to, ' ')
}

function pushCarnews() {
  const editorStore = useEditorStore()
  const userStore = useUserStore()
  const contet = props.editor.getHTML()
  console.log('-------html-content---------');
  console.log(contet);
  console.log(props.editor.getHTML());
  // const title = content.trim().split('')
  editorStore.setEditPostContent(contet)
  // editorStore.setEditPostTitle()
  publishPost(1,editorStore.getEditPost,userStore.getToken).then((result)=>{
    editorStore.setEditPost(result.post)
  })
}

function pushXHS(){
  // const content = `<p>xiaohongshu<br><br><br><br><br><br>xiaohongshu</p>`
  const content = '我寻思着：怎么到23年Q4了还有人吹特斯拉的单车毛利高，有降价空间？<br /><br />这直营汽车业务的毛利率都已经低于16%，如果换算成经销商模式那毛利可不是得低到10%的水平了？<br /><br />拜托，睁开眼睛看看财报吧。<br /><br /><a  href=https://m.weibo.cn/search?containerid=231522type%3D1%26t%3D10%26q%3D%23%E6%96%B0%E8%83%BD%E6%BA%90%E6%B1%BD%E8%BD%A6%23&isnewpage=1&luicode=20000061&lfid=4965344613499234 data-hide=><span class=surl-text>#新能源汽车#</span></a><a  href=https://m.weibo.cn/search?containerid=231522type%3D1%26t%3D10%26q%3D%23%E6%B1%BD%E5%9C%BA%E5%85%A8%E5%BC%80%23&extparam=%23%E6%B1%BD%E5%9C%BA%E5%85%A8%E5%BC%80%23&luicode=20000061&lfid=4965344613499234 data-hide=><span class=surl-text>#汽场全开#</span></a><a  href=https://m.weibo.cn/search?containerid=231522type%3D1%26t%3D10%26q%3D%23%E5%BE%AE%E5%8D%9A%E5%AE%A0%E7%B2%89%E5%AD%A3%23&extparam=%23%E5%BE%AE%E5%8D%9A%E5%AE%A0%E7%B2%89%E5%AD%A3%23&luicode=20000061&lfid=4965344613499234 data-hide=><span class=surl-text>#微博宠粉季#</span></a>'
  props.editor.commands.setContent(content)
  // props.editor.commands.setHardBreak()
  console.log(props.editor.getHTML());
}

function aiGenate2() {
  console.log(getSelection());
  const len = document.querySelectorAll('p').length
  const prompt = getSelection()
  // props.editor.commands.insertContent('<p></p>')
  chat(prompt).then(async(reader) =>{
    const textDecoder = new TextDecoder();
    let result = true;
    let output = "";
    while (result) {
      const { done, value } = await reader.read();

      if (done) {
        console.log("Stream ended");
        result = false;
        break;
      }
      const chunkText = textDecoder.decode(value);
      props.editor.commands.insertContent(chunkText)
      // output += chunkText;
      // console.log("Received chunk:", chunkText);
    }
  })

}

function transEnglish() {
  // console.log('-------------');
  let text = getSelection();
  if (text?.length > 0) {
    // console.log('----------------');
  } else {
    text = props.editor.getText();
  }
  trans2English(text).then((result) => {
    console.log(result.data.result);
    props.editor.commands.deleteSelection()
    props.editor.commands.insertContent(result.data.result)

  })
}




</script>

<style scoped>
.ai-dropdown {
  line-height: 45px;
  height: 45px;
}

.el-tiptap-dropdown-item {
  /* width: 100px; */
  font-size: 16px;
  padding: 5px 10px;
}


.msg {
  color: rgb(88, 88, 88);
  letter-spacing: 2px;
}

.msg ::v-deep .cursorChar {
  display: inline-block;
  margin-left: 2px;
}
</style>
